<template>
    <div style="text-align:center;margin-top:150px">
        <div style="font-size:25px;color:blue">邮箱登录</div>
        <el-form :model="form" :inline="true">
            <div style="margin-top:30px;height:10px">
                <div style="margin-top:30px; width:220px; margin-left:90px">
                    <el-input placeholder="请输入账号" :prefix-icon="User" type="text" v-model="form.username"/>
                </div>
                <div style="margin-top:10px;height:10px;margin-left:15px">
                <el-row :gutter="10" style="width:100%">
                    <el-col :span="15" >
                        <el-input placeholder="邮箱" :prefix-icon="EditPen" type="email" v-model="form.email" style="margin-left:75px"/>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="success" style="margin-left:70px" @click="sendCode()">获取验证码</el-button>
                    </el-col>
                </el-row>
                </div>
                <div style="margin-top:30px; width:220px; margin-left:90px">
                    <el-input placeholder="请输入验证码" :prefix-icon="Lock" type="text" v-model="form.code"/>
                </div>
                <div style="margin-top:10px; width:220px; margin-left:90px">
                    <el-button type="success" style="width:100px;margin-left:30px;margin-top:30px" @click="login()">登录</el-button>
                </div>
            </div>
        </el-form>
        </div>
</template>
<script setup>
import { reactive } from 'vue'
import {User,Lock,EditPen} from '@element-plus/icons-vue'
import { post } from '@/utils/request.js'
import {ElMessage} from 'element-plus'
import router from '@/router'

const form = reactive({
  username:'',
  email:'',
  code: ''
})

const login=()=>{
post('/emailLogin',{
  username: form.username,
  email: form.email,
  code: form.code
},(message)=>{
ElMessage.success(message)
router.push('/index')
},(data)=>{
ElMessage.warning(data)
})
}

const sendCode=()=>{
post('/needcode',{
  email:form.email
},(message)=>{
ElMessage.success(message)
},(data)=>{
ElMessage.warning(data)
})

}

</script>
<style scoped>
</style>